
<template>

  <div class="block flow-line">
    <el-timeline style="padding-left: 0px;">

      <template  v-for="(task, index) in flowLine">

          <!-- 开始节点 -->
          <template v-if="task.nodeType == nodeType.START">

              <el-timeline-item color="#409EFF" size="large">

                  <StartNode :node="task"></StartNode>

              </el-timeline-item>

          </template>
          <!-- 开始节点 -->

          <!-- 审批节点 -->
          <template v-if="task.nodeType == nodeType.APPROVER">

              <!-- 存在处理节点 -->
              <template v-if="task.undos && task.undos.length > 0">

                  <!-- 显示已处理人的节点,不显示待处理，在下面集中显示 -->
                  <template v-for="(undo, undoIndex) in task.undos" v-if="undo.result != 0">
                      <el-timeline-item :color="approverNodeColor(undo)" size="large" :icon="approverNodeIcon(undo)">
                        <ApproverNode :undo="undo" :task="task"></ApproverNode>
                      </el-timeline-item>
                  </template>
                  <!-- 显示已处理人的节点 -->

                  <!-- 未结束 -->
                  <template v-if="task.finished == 0">
                      <el-timeline-item color="#E6A23C" size="large" icon="el-icon-more">
                        <WaitApproverNode :task="task"></WaitApproverNode>
                      </el-timeline-item>
                  </template>

              </template>

          </template>
          <!-- 审批节点 -->

          <!-- 抄送节点 -->
          <template v-if="task.nodeType == nodeType.COPY">
              <el-timeline-item color="#0bbd87" size="large" icon="el-icon-check">
                  <CopyNode :task="task"></CopyNode>
              </el-timeline-item>
          </template>

      </template>

        <!-- 撤回 -->
        <template v-if="procinst.state == procinstState.RECALL">
            <el-timeline-item color="#909399" size="large" icon="el-icon-refresh-left">
                <ReCallNode :procinst="procinst"></ReCallNode>
            </el-timeline-item>
        </template>

        <!--
          <el-timeline-item
            v-for="(node, index) in flowLine"
            :key="index"
            size="large">

              <template v-if="node.type === nodeType.START">
                  <StartNode :node="node"></StartNode>
              </template>
              <template v-else-if="node.type === nodeType.COPY">
                  <CopyNode :node="node"></CopyNode>
              </template>


              <template v-else-if="node.type === nodeType.APPROVER">
                  <ApproverNode :node="node"></ApproverNode>
              </template>


          </el-timeline-item>
           -->
    </el-timeline>

  </div>

</template>
<script>

import StartNode from "./FlowNode/StartNode/index.vue";
import CopyNode from "./FlowNode/CopyNode/index.vue";
import ApproverNode from "./FlowNode/ApproverNode/index.vue";
import WaitApproverNode from "./FlowNode/WaitApproverNode/index.vue";

import ReCallNode from "./FlowNode/ReCallNode/index.vue";

export default {
  name:'flow-line',
  props: ["flowLine", "procinst"],
  data() {
    return {
        nodeType: {
          START: "start", //开始
          APPROVER: "approver", //审批
          COPY: "copy" //抄送
        },

        procinstState: {
            IN_APPROVAL: 1, //审批中
            PASS: 2, //通过
            REJECT: -1, //驳回
            RECALL: 3 //撤回
        }
    };
  },
  components: {
      StartNode,
      CopyNode,
      ApproverNode,
      WaitApproverNode,
      ReCallNode
  },

  created() {

  },

  computed: {

  },
  methods: {

      approverNodeColor(undo){

          var result = '#0bbd87'

          if(undo.result == 3){//拒绝

              result = '#F56C6C'

          }else if(undo.result == 4){//委托

              result = '#E6A23C';
          }

          return result;
      },

      approverNodeIcon(undo){

          var result = 'el-icon-check';

          if(undo.result == 3){//拒绝

              result = 'el-icon-close';

          }else if(undo.result == 4){//委托

              result = 'el-icon-top-righ';
          }

          return result;
      }

  },
  watch: {
      flowLine: {
          handler:function (nodeInfos) {

              var that = this;

          },
          immediate: true,
          deep: true
      },

      procinst: {
          handler:function (procinst) {

              var that = this;

          },
          immediate: true,
          deep: true
      }
  }
};
</script>
<style lang="stylus">

  .flow-line {
    .el-card__body{
      padding: 5px;
    }

    h4{
      margin-top: 0px;
      margin-bottom: 0px;
    }

    .el-card{
      border-left: 0px;
      border-right: 0px;
      border-top: 0px;
    }

    .next-line{
      color: #C0C4CC;
      text-align: center;
      width: 15px;
      font-size: 14px;
      display: inline-block;
    }

    .el-timeline-item{
      padding-bottom: 10px!important;
    }

    .title {
      color: #8492a6;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 10px;
      text-align: center;
    }

    .add-require {
      color: #F56C6C!important;
    }

    .close-btn{
      width: 40px;
      height: 14px;
      display: inline-block;
      position: absolute;
      top: -2px;
    }
  }
</style>
